<?php
include('config.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>
		Share my ride
	</title>
	<!-- La feuille de styles "base.css" doit être appelée en premier. -->
	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="styles/modele.css" media="screen" />
	 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	
    <script type="text/javascript">
     var directionsDisplay; 
var directionsService = new google.maps.DirectionsService();
var map;
var table = [];
var i = 0 , j = 1;
var markers = [];
var waypts = [];
function initialize() {

	directionsDisplay = new google.maps.DirectionsRenderer();
	var lille = new google.maps.LatLng(50.650,3.083);
	var mapOptions = {
    zoom:15,
    center: lille
	}
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	directionsDisplay.setMap(map);
 
	google.maps.event.addListener(map, 'click', function(event) {
    
	table.push(event.latLng);
	addMarker(event.latLng);
	});
}


function addMarker(location) {
	var marker = new google.maps.Marker({
    position: location,
    map: map
	});
	markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(map);
	}
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
	setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}


function calcRoute(){

	for(var i = 1; i < table.length - 1; i++){
	waypts.push({
          location:table[i].toString(),
          stopover:true});
}

 var request = {
    origin: table[0].toString(),
    destination: table[table.length - 1].toString(),
		waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.BICYCLING
  };
       
 directionsService.route(request, function(response, status) {
		if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
		}
		});
		deleteMarkers();

}
 
function save(){
calcRoute();
var rideName = document.getElementById("rideName").value;
window.location.replace("saveRide.php?table="+table+"&rideName="+rideName);
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<?php include'head.php';?>
</head>

<body>

<div id="global">

	<?php	include('menu.php'); ?>

	<div id="centre">

		<div id="principal">
			
			
		<!--	<h3>À noter</h3> -->
			<div id="panel">
				<label for="rideName">Nom du parcours : </label><input type="text" name="rideName" id="rideName"/>			
				<input type="button" value="Creer le parcours" onclick="calcRoute()"/>
				<input type="button" value="Enregistrer" onclick="save()"/>
			</div>
			<div id="map-canvas">
				
				</div>
				<br />
			
		</div><!-- #principal -->

		<div id="secondaire">
		<?php include 'col_gauche.php'; ?>
                
      
		</div><!-- #secondaire -->

	</div><!-- #centre -->

</div><!-- #global -->

</body>
</html>
